<template>
  <div class="number-person-container">
    <el-row :gutter="20">
      <!-- 固定卡片 -->
      <el-col :span="6">
        <div class="card vertical-card">
          <div class="card-img-wrapper">
            <div class="left-card">
              <div class="title">数字人分身</div>
              <div class="desc">上传视频，快速复刻数字分身</div>
            </div>
          </div>
          <div class="card-desc-wrapper">
            <div class="card-desc-content">
              <el-button class="custom-btn" round plain @click="showDialog = true">
                快速复刻 <el-icon style="margin-left:4px"><ArrowRight /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 动态卡片 -->
      <el-col
          v-for="item in contentList"
          :key="item.id"
          :span="6"
      >
        <div class="card vertical-card" style="position: relative;">
          <div class="clone-success-badge" @mouseenter="hoveredClone = item.id" @mouseleave="hoveredClone = null">
            <template v-if="hoveredClone === item.id">
              <el-button type="danger" size="small" @click.stop="handleDeleteClone(item)">删除</el-button>
            </template>
            <template v-else>
              <span v-if="item.status === 1">准备中</span>
              <span v-else-if="item.status === 2">训练中</span>
              <span v-else-if="item.status === 3">克隆成功</span>
              <span v-else>未知状态</span>
            </template>
          </div>
          <div class="card-img-wrapper" @click="handleVideoClick(item)">
            <template v-if="currentPlayingVideo === item.id">
              <video
                  ref="videoPlayer"
                  class="card-vertical-img"
                  :src="item.url"
                  controls
                  preload="metadata"
              >
                <source :src="item.url" type="video/mp4">
                您的浏览器不支持视频播放。
              </video>
            </template>
            <template v-else>
              <img :src="item.url_image" class="card-vertical-img" />
            </template>
          </div>
          <el-tooltip :content="item.name" placement="top" effect="dark">
            <div class="card-desc-wrapper">
              <div class="card-desc-content">
                <span class="card-desc-text">{{ item.name }}</span>
              </div>
            </div>
          </el-tooltip>
          <div class="card-bottom-bar">
<!--            <span class="card-time">{{ item.voice_name }}</span>-->
<!--            <span class="card-time">{{ item.packing_name }}</span>-->
          </div>
          <div class="card-bottom-btns">
            <el-button style="flex: 1;" size="small" type="success" @click.stop="handleSelectVoice(item)">{{ item.voice_name?item.voice_name:"选择音色" }}</el-button>
            <el-button style="flex: 1;" size="small" type="success" @click.stop="handleSelectPacking(item)">{{ item.packing_name?item.packing_name:"包装模板" }}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 使用者承诺须知 -->
    <MyDialog
      v-model="showDialog"
      title="使用者承诺须知"
      width="480px"
      :modal="true"
      :close-on-click-modal="false"
      confirmText="我已知晓、同意"
      @confirm="handleDialogConfirm"
    >
      <div class="dialog-content" :style="{color:theme === 'light'?'#333':'#eee'}">
        本声明将帮助您更好地在本平台,使用相关工具上传和管理您的作品。您若上传作品，即视为您以充分知悉并充分接受以下内容：
      </div>
      <ul style="font-size: 15px; padding-left: 18px;" :style="{color:theme === 'light'?'#333':'#eee'}">
        <li style="margin-bottom: 10px;">您作为使用者在本平台上传、发布的作品，应具有独立、完整的知识产权，不得侵犯他人知识产权等任何权利。</li>
        <li style="margin-bottom: 10px;">您在使用本平台上传、发布作品时，应当自觉遵守国家法律、法规，遵守公共秩序，尊重社会公德、社会主义制度、国家利益、公众合法权益，遵循网络信息真实等基本要求。如有违反，经本平台核验确属违规或侵权的有权限于删除、下架、禁止发布内容、封禁账号等处理方式。如造成严重影响或法律追责的，本平台将有权向有关管理机关或公安机关提交相关内容，并配合进行调查。</li>
        <li style="margin-bottom: 10px;">若您上传的作品及作品的素材（包括但不限于创意、文本、肖像、声音、图片、视频等）侵犯了任何第三方权利，本平台有权在收到相关投诉举报后对该被投诉的作品和用户账号做相应处理，采取包括但不限于下架、警告、封禁账号等处理方式。</li>
      </ul>
    </MyDialog>
    <!-- 视频要求 -->
    <MyDialog
      v-model="showRuleDialog"
      title="视频要求"
      width="700px"
      :modal="true"
      :close-on-click-modal="false"
      confirmText="知道了"
      @confirm="handleRuleDialogConfirm"
    >
      <div style="font-size:20px;font-weight:bold;margin-bottom:10px;" :style="{color:theme === 'light'?'#333':'#eee'}">视频要求</div>
      <ol style="font-size:16px;color:#333;margin-bottom:18px;padding-left:20px;" :style="{color:theme === 'light'?'#333':'#eee'}">
        <li>不要使用有多人的视频</li>
        <li>确认人脸不要太小，建议人脸宽度占整体画面宽度的1/4以上</li>
        <li>人脸不要太大，确保整张人脸都在屏幕区域内，人脸不要出屏幕</li>
        <li>确保面部特征没有被遮挡，并努力让面部清晰可见</li>
        <li>上传的视频分辨率不应低于360p，也不应超过3840p，建议分辨率为720p或1080p</li>
        <li>视频长度不应少于10秒，不超过300秒</li>
      </ol>
      <div style="font-size:18px;color:#e53935;font-weight:bold;margin-bottom:10px;">错误示例</div>
      <div style="display:flex;align-items:flex-end;gap:32px;margin-bottom:18px;">
        <div style="display:flex;flex-direction:column;align-items:center;">
          <img src="https://jstd168.com/storeadmin/img/Multifaceted.82317824.png" style="width:80px;height:80px;object-fit:contain;" />
          <span style="margin-top:8px;font-size:15px;color:#e53935;">多张人脸</span>
        </div>
        <div style="display:flex;flex-direction:column;align-items:center;">
          <img src="https://jstd168.com/storeadmin/img/big.7ec70f77.png" style="width:80px;height:80px;object-fit:contain;" />
          <span style="margin-top:8px;font-size:15px;color:#e53935;">人脸太大</span>
        </div>
        <div style="display:flex;flex-direction:column;align-items:center;">
          <img src="https://jstd168.com/storeadmin/img/Occlusion.fcb12985.png" style="width:80px;height:80px;object-fit:contain;" />
          <span style="margin-top:8px;font-size:15px;color:#e53935;">脸部遮挡</span>
        </div>
        <div style="display:flex;flex-direction:column;align-items:center;">
          <img src="https://jstd168.com/storeadmin/img/wu.538f5a49.png" style="width:80px;height:80px;object-fit:contain;" />
          <span style="margin-top:8px;font-size:15px;color:#e53935;">检测不到人脸</span>
        </div>
      </div>
    </MyDialog>
    <!-- 素材上传 -->
    <MyDialog
      v-model="showSourcePersonDialog"
      title="素材上传"
      width="50%"
      :modal="true"
      :close-on-click-modal="false"
       @confirm="handleUploadConfirm"
    >
      <SourcePersonNew ref="sourcePersonNewRef" @confirm="handleUploadConfirm"/>
    </MyDialog>
    <!-- 请输入数字人名称 -->
    <MyDialog
      v-model="showNameDialog"
      title="请输入数字人名称"
      width="400px"
      :modal="true"
      :close-on-click-modal="false"
      confirmText="确定"
      @confirm="handleNameDialogConfirm"
    >
      <el-input
        v-model="personName"
        placeholder="请输入数字人名称"
        maxlength="20"
        show-word-limit
        clearable
        style="background: transparent;"
      />
    </MyDialog>
    <!-- 选择包装模板 -->
    <MyDialog
      v-model="showPackageDialog"
      title="选择包装模板"
      width="900px"
      :modal="true"
      :close-on-click-modal="false"
      confirmText="确定"
      @confirm="handlePackageDialogConfirm"
    >
      <el-row :gutter="20">
        <el-col
          v-for="item in packageInfo"
          :key="item.id"
          :span="6"
          style="margin-bottom: 20px; position: relative;"
        >
          <div
            class="package-card"
            :style="{ border: selectedPackageId === item.id ? '2px solid #409EFF' : '1px solid #eee', borderRadius: '10px', overflow: 'hidden', position: 'relative', height: '180px', cursor: 'pointer' }"
            @click="selectedPackageId = item.id"
          >
            <!-- 单选框 -->
            <el-radio
              :model-value="selectedPackageId"
              :label="item.id"
              style="position: absolute; top: 8px; left: 8px; z-index: 2;"
              :style="{color:theme === 'light'?'#333':'#eee'}"
              @change="selectedPackageId = item.id"
            >
            </el-radio>
            <!-- 图片部分 -->
            <div style="height: 75%; display: flex; align-items: center; justify-content: center; background: transparent;">
              <img :src="item.url" style="max-width: 100%; max-height: 100%; object-fit: cover;" />
            </div>
            <!-- 名字部分 -->
            <div style="height: 25%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px;" :style="{color:theme === 'light'?'#333':'#eee'}">
              {{ item.name }}
            </div>
          </div>
        </el-col>
      </el-row>
    </MyDialog>
    <!-- 选择音色 -->
    <MyDialog
      v-model="showVoiceDialog"
      title="选择音色"
      width="700px"
      :modal="true"
      :close-on-click-modal="false"
      confirmText="确定"
      @close="handleCloseVoiceDialog"
      @confirm="handleVoiceDialogConfirm"
    >
      <div style="margin-bottom: 18px;">
        <div style="font-size: 18px; font-weight: bold; margin-bottom: 10px;" :style="{color:theme === 'light'?'#333':'#eee'}">公共声音</div>
        <el-row :gutter="20">
          <el-col v-for="item in voiceInfo.gyVoice" :key="item.id" :span="8" style="margin-bottom: 16px;">
            <div
              :style="{
                display: 'flex',
                alignItems: 'center',
                border: selectedVoiceId === item.id ? '2px solid #409EFF' : '1px solid #eee',
                borderRadius: '8px',
                padding: '12px',
                color:theme === 'light'?'#333':'#eee',
                cursor: 'pointer',
                boxShadow: selectedVoiceId === item.id ? '0 0 8px #409EFF44' : 'none',
                background: 'transparent',
              }"
              @click="handleSelectVoiceCard(item, 'gy')"
            >
              <el-button
                circle
                @click.stop="handlePlayAudio(item.url, item.id)"
                :type="playingAudioId === item.id ? 'primary' : 'default'"
                style="margin-right: 12px; background: transparent; border: none; box-shadow: none; padding: 0; min-width: unset; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;"
              >
                <el-icon v-if="playingAudioId === item.id" style="font-size: 28px;" :style="{color:theme === 'light'?'#333':'#eee'}"><VideoPause /></el-icon>
                <el-icon v-else style="font-size: 28px;" :style="{color:theme === 'light'?'#333':'#eee'}"><VideoPlay /></el-icon>
              </el-button>
              <span style="font-size: 16px;" :style="{color:theme === 'light'?'#333':'#eee'}">{{ item.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <div style="font-size: 18px; font-weight: bold; margin-bottom: 10px;" :style="{color:theme === 'light'?'#333':'#eee'}">克隆声音</div>
        <el-row :gutter="20">
          <el-col v-for="item in voiceInfo.klVoice" :key="item.id" :span="8" style="margin-bottom: 16px;">
            <div
              :style="{
                display: 'flex',
                alignItems: 'center',
                border: selectedVoiceId === item.id ? '2px solid #409EFF' : '1px solid #eee',
                borderRadius: '8px',
                padding: '12px',
                color: theme === 'light'?'#333':'#eee',
                cursor: 'pointer',
                boxShadow: selectedVoiceId === item.id ? '0 0 8px #409EFF44' : 'none',
                background: 'transparent',
              }"
              @click="handleSelectVoiceCard(item, 'kl')"
            >
              <el-button
                circle
                @click.stop="handlePlayAudio(item.demo_url, item.id)"
                :type="playingAudioId === item.id ? 'primary' : 'default'"
                style="margin-right: 12px; background: transparent; border: none; box-shadow: none; padding: 0; min-width: unset; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;"
              >
                <el-icon v-if="playingAudioId === item.id" style="font-size: 28px;" :style="{color:theme === 'light'?'#333':'#eee'}"><VideoPause /></el-icon>
                <el-icon v-else style="font-size: 28px;" :style="{color:theme === 'light'?'#333':'#eee'}"><VideoPlay /></el-icon>
              </el-button>
              <span style="font-size: 16px;" :style="{color:theme === 'light'?'#333':'#eee'}">{{ item.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </MyDialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import { ArrowRight, VideoPlay, VideoPause } from '@element-plus/icons-vue'
import MyDialog from '../common/MyDialog.vue'
import SourcePersonNew from '../videoWarehouse/SourcePersonNew.vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import utils from '../../utils/utils'

//主题控制light  dark
const theme = utils.getTheme();
const contentList = ref([])
const currentPlayingVideo = ref<number | null>(null)
const showDialog = ref(false)
const showRuleDialog = ref(false)
const showSourcePersonDialog = ref(false)
const sourcePersonNewRef = ref()
const selectedPersonData = ref(null)
const showNameDialog = ref(false)
const personName = ref("")
const hoveredClone = ref<number | null>(null)
const packageInfo = ref([])
const showPackageDialog = ref(false)
const selectedPackageId = ref<number | null>(null)
const currentProfileId = ref<number | null>(null)
const voiceInfo = ref({
  gyVoice : [],
  klVoice : []
})

const showVoiceDialog = ref(false)
const currentAudio = ref<HTMLAudioElement | null>(null)
const playingAudioId = ref<number | string | null>(null)
const selectedVoiceId = ref<number | string | null>(null)
const selectedVoiceData = ref<any>(null)

onMounted(() => {
  initContentList()
})

const initContentList = async () => {
  const response = await axiosUtil.post('api/digitalpeople/profilelist', {})
  if (response.data.code === 1 && response.data.data) {
    contentList.value = response.data.data
  }
}

const handleGenerateVideo = (item: any) => {
  // 处理生成视频的点击事件
  console.log('生成视频', item)
}

const handleVideoClick = (item: any) => {
  if (currentPlayingVideo.value === item.id) {
    currentPlayingVideo.value = null
  } else {
    currentPlayingVideo.value = item.id
  }
}

const handleDialogConfirm = () => {
  showDialog.value = false
  showRuleDialog.value = true
}

const handleRuleDialogConfirm = () => {
  showRuleDialog.value = false
  showSourcePersonDialog.value = true
}

const handleUploadConfirm = async () => {
  if (sourcePersonNewRef.value && sourcePersonNewRef.value.getSelectMateriaAll) {
    selectedPersonData.value = sourcePersonNewRef.value.getSelectMateriaAll();
  }
  showSourcePersonDialog.value = false;
  showNameDialog.value = true;
  personName.value = "";
}

const handleNameDialogConfirm =async () => {
  showNameDialog.value = false
  const response = await axiosUtil.post('api/digitalpeople/addprofile', {
    url: selectedPersonData.value.url,
    url_image: selectedPersonData.value.url_image,
    duration: selectedPersonData.value.duration,
    name: personName.value,
    protype: ""
  })
  if(response.data.code === 1){
    initContentList()
  }
}

const handleSelectVoice = async(item: any) => {
  showVoiceDialog.value = true
  currentProfileId.value = item.id
  const res = await axiosUtil.post('api/digitalpeople/voicelist', {})
  if(res.data.code === 1){
   voiceInfo.value.gyVoice = res.data.data.gyvoice
   voiceInfo.value.klVoice = res.data.data.klvoice
  }
}

const handlePlayAudio = (url: string, id: number | string) => {
  // 如果当前正在播放且点击的是同一个音频，则停止播放
  if (currentAudio.value && playingAudioId.value === id) {
    currentAudio.value.pause()
    currentAudio.value = null
    playingAudioId.value = null
    return
  }
  // 否则播放新音频
  if (currentAudio.value) {
    currentAudio.value.pause()
    currentAudio.value = null
    playingAudioId.value = null
  }
  const audio = new Audio(url.replace(/\r?\n/g, ''))
  currentAudio.value = audio
  playingAudioId.value = id
  audio.play()
  audio.onended = () => {
    playingAudioId.value = null
  }
}

const handleCloseVoiceDialog = () => {
  showVoiceDialog.value = false
  if (currentAudio.value) {
    currentAudio.value.pause()
    currentAudio.value = null
    playingAudioId.value = null
  }
}

const handleSelectPacking = async (item: any) => {
  showPackageDialog.value = true
  currentProfileId.value = item.id
  const res = await axiosUtil.post('api/digitalpeople/packinglist', {
    "profile_id": item.id
  })
  if(res.data.code === 1){
    packageInfo.value = res.data.data
  }
}

const handlePackageDialogConfirm = async() => {
  const selected = packageInfo.value.find(item => item.id === selectedPackageId.value)
  if (selected && currentProfileId.value) {
  const resPackage = await axiosUtil.post('api/digitalpeople/updatepacking', {
      id: selected.id,
      profile_id: currentProfileId.value,
      name: selected.name,
      packing_text: selected.packing_text
    })
    if(resPackage.data.code === 1){
      initContentList()
      ElMessage.success(resPackage.data.data)
    }
  }
  showPackageDialog.value = false
}

const handleDeleteClone = (item: any) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then( async() => {
    // 删除克隆逻辑
    let deleteIds = []
    deleteIds.push(item.id)
    const response = await axiosUtil.post('api/digitalpeople/deleteprofile', {
      ids: deleteIds
    })
    if(response.data.code===1){
      ElMessage.success(response.data.data)
      initContentList()
    }else{
      ElMessage.error(response.data.data)
    }
    console.log('删除克隆', item)
  }).catch(() => {
    // 取消删除
  })
}

const handleSelectVoiceCard = (item: any, type: 'gy' | 'kl') => {
  selectedVoiceId.value = item.id
  selectedVoiceData.value = { ...item, type }
}

const handleVoiceDialogConfirm = async () => {
  // 这里可以处理选中的音频数据 selectedVoiceData.value
  if(currentProfileId.value && selectedVoiceData.value){
    const response = await axiosUtil.post('api/digitalpeople/updatevoice', {
    "id": selectedVoiceData.value.id,
    "profile_id": currentProfileId.value,
    "name": selectedVoiceData.value.name,
    "voice": selectedVoiceData.value.voice
  })
  if(response.data.code === 1){
    ElMessage.success(response.data.data)
    initContentList()
  }
  }
  // 例如：console.log('选中的音频数据', selectedVoiceData.value)
  showVoiceDialog.value = false
  if (currentAudio.value) {
    currentAudio.value.pause()
    currentAudio.value = null
    playingAudioId.value = null
  }
}

</script>

<style scoped>
.dialog-content {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
}
.number-person-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  backdrop-filter: blur(10px);
}

.number-person-container::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 20, 40, 0.3)"');
}

.number-person-container::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2))" : "linear-gradient(180deg, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.2))"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 255, 255, 0.3)"');
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 255, 255, 0.2)"');
}

.number-person-container::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 20, 40, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 255, 255, 0.1)"');
}

.card {
  height: 320px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-radius: 10px;
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 255, 255, 0.15)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 255, 255, 0.3)"');
}

.left-card {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 20px;
  background-color: transparent;
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"'); */
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-radius: 10px;
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"');
}

.title {
  font-size: 28px;
  font-weight: bold;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  margin-bottom: 18px;
  line-height: 1.2;
}

.desc {
  font-size: 14px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
  margin-bottom: 32px;
  line-height: 1.5;
}

.custom-btn {
  border: 2px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"') !important;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"') !important;
  background: transparent !important;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  letter-spacing: 2px;
}

.custom-btn:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"') !important;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"') !important;
  border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"') !important;
}

.avatar {
  width: 100%;
  height: 100%;
  max-width: 160px;
  max-height: 200px;
  border-radius: 10px;
  object-fit: cover;
}

.name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.voice-name, .packing-name {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.card-bottom {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 12px;
}

.vertical-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 320px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 24px;
}

.vertical-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-color: rgba(255,255,255,0.3);
}

.card-img-wrapper {
  flex: 0 0 60%;
  height: 75%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: rgba(255,255,255,0.1); */
  cursor: pointer;
  position: relative;
}

.card-img-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(0,255,255,0.08);
  background: transparent;
}

/* 自定义视频控制器样式 */
.card-img-wrapper :deep(video::-webkit-media-controls) {
  background: transparent;
}

.card-img-wrapper :deep(video::-webkit-media-controls-panel) {
  background: linear-gradient(transparent, rgba(0, 20, 40, 0.8));
}

.card-img-wrapper :deep(video::-webkit-media-controls-play-button) {
  background-color: rgba(0, 255, 255, 0.3);
  border-radius: 50%;
}

.card-img-wrapper :deep(video::-webkit-media-controls-volume-slider) {
  background-color: rgba(0, 255, 255, 0.3);
}

.card-img-wrapper :deep(video::-webkit-media-controls-timeline) {
  background-color: rgba(0, 255, 255, 0.3);
}

.card-img-wrapper :deep(video::-webkit-media-controls-current-time-display),
.card-img-wrapper :deep(video::-webkit-media-controls-time-remaining-display) {
  color: #fff;
}

.card-img-wrapper :deep(video::-webkit-media-controls-fullscreen-button) {
  background-color: rgba(0, 255, 255, 0.3);
  border-radius: 50%;
}

.card-vertical-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(0,255,255,0.08);
}

.card-desc-wrapper {
  margin-top: 10px;
  flex: 0 0 auto;
  height: 15%;
  padding: 8px 14px;
  background: transparent;
  /* background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"'); */
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  font-size: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.card-desc-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.card-desc-text {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.2s;
  margin-right: 8px;
}

.card-bottom-bar {
  flex: 0 0 auto;
  padding: 0 14px 4px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 0.85em;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#b2ebf2"');
}

.card-time {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#b2ebf2"');
  font-size: 0.85em;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-bottom-btns {
  flex: 0 0 44px;
  display: flex;
  gap: 8px;
  padding: 0 14px 10px 14px;
  margin-top: 0;
}
.card-bottom-btns .el-button {
  flex: 1;
}

.clone-success-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 10px;
  padding: 4px 12px;
  font-size: 14px;
  z-index: 2;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  min-width: 60px;
  min-height: 28px;
  justify-content: center;
  cursor: pointer;
}
/* 悬停时去除黑色底框 */
.clone-success-badge:has(.el-button) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
}

.package-card {
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  height: 180px;
  cursor: pointer;
  transition: border 0.2s;
  background: transparent;
}

.package-card:hover {
  border-color: #409EFF;
}

.package-card img {
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 1200px) {
  .vertical-card {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .vertical-card {
    height: 220px;
  }
}
</style>
